<template>
  <div class="exam-detail-page">
    <div class="exam-page">
      <nav2 ref="nav2"></nav2>
      <div class="exam-page__content">
        <div class="exam-container exam-intro">
          <div class="exam-intro-wrapper">
            <div class="exam-intro-wrapper__section">
              <div class="title h2">IELTS Listening</div>
              <div class="text f14">Time: Approximately 30 minutes</div>
            </div>
            <div class="exam-intro-wrapper__section">
              <div class="title h2">INSTRUCTIONS TO CANDIDATES</div>
              <ul class="lines">
                <li class="f14">Answer&nbsp;all&nbsp;the questions.</li>
                <li class="f14">You can change your answers at any time during the test.</li>
              </ul>
            </div>
            <div class="exam-intro-wrapper__section">
              <div class="title h2">INFORMATION FOR CANDIDATES</div>
              <ul class="lines">
                <li class="f14">There are 40 questions in this test.</li>
                <li class="f14">Each question carries one mark.</li>
                <li class="f14">There are four parts to the test</li>
                <li class="f14">You will hear each part once.</li>
                <li class="f14">For each part of the test there will be time for you to look through
                  the questions and time for you to check your answers.</li>
              </ul>
            </div>
            <div class="exam-intro-wrapper__section">
              <div class="text center f14">Do not click 'Start test' until you are told to do so.
              </div>
            </div>
            <div class="exam-button default" @click="listenAnswer">Start test</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import nav2 from '../components/nav2.vue'
  export default {
    data() {
      return {
        play: false
      }
    },
    components: {
      nav2
    },
    methods: {
      playAudio() {
        this.$refs.nav2.playAudio();
        this.play = true;
      },
      pauseAudio() {
        this.$refs.nav2.pauseAudio();
        this.play = false;
      },
      listenAnswer() {
        this.pauseAudio();
        this.$router.push('/listenAnswer');
      },
    }
  }

</script>

<style lang="less" scoped>
  .exam-detail-page {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    .exam-page,
    .exam-page__content {
      display: flex;
      flex-direction: column;
      position: relative;
    }

    .exam-page {
      justify-content: flex-start;
      min-width: 1080px;
      max-width: 100%;
      height: 100%;
      overflow: hidden;
      background: #dee5f5;
    }

    .exam-page__content {
      justify-content: space-between;
      width: 100%;
      height: 96%;
    }

    .exam-page,
    .exam-page__content {
      display: flex;
      flex-direction: column;
      position: relative;
    }

    .exam-intro {
      font-family: Arial;
      justify-content: flex-start;
    }

    .exam-container {
      width: 100%;
      height: 100%;
      padding-top: 1.19792rem;
      padding-bottom: 12px;
      font-family: Arial;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      position: relative;
      overflow-y: auto;
    }

    .exam-intro-wrapper,
    .exam-intro-wrapper__section {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .exam-intro-wrapper {
      width: 95%;
      height: 100%;
      min-height: 23.4375rem !important;
      margin-top: 1.30208rem;
      justify-content: flex-start;
    }

    .exam-intro-wrapper__section {
      width: 100%;
      margin-top: .52083rem;
      justify-content: center;

      .title {
        width: 100%;
        color: #010101;
      }

      .text {
        width: 100%;
        font-weight: 400;
        color: #000;
      }

      .lines {
        margin-left: 2.08333rem;

        li {
          list-style: disc;
          font-family: Microsoft YaHei;
          color: #222;
        }
      }
    }

    .h2 {
      font-size: 21px;
    }

    .h1,
    .h2 {
      height: 30px;
      line-height: 30px;
      font-weight: 700;
    }

    .f14 {
      font-size: 14px;
    }

    .f14,
    .f16 {
      height: 24px;
      line-height: 24px;
    }

    .center {
      text-align: center;
      -ms-flex-item-align: center;
      align-self: center;
    }

    .exam-button.default:active {
      background: #2464c5;
      border: 3px solid #95bef9;
      color: #fff;
    }

    .exam-button {
      width: 4.89583rem;
      margin-top: .9375rem;
      -ms-flex-item-align: center;
      align-self: center;
    }

    .exam-button.default {
      -webkit-box-shadow: 0 2px 3px 0 #707070;
      box-shadow: 0 2px 3px 0 #707070;
      color: #333;
      background: #dee5f5;
      border: 3px solid transparent;
    }

    .exam-button {
      height: 1.97917rem;
      line-height: 1.97917rem;
      border-radius: 4px;
      vertical-align: middle;
      text-align: center;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
    }
  }

</style>
